import { For } from "solid-js";
import type { ButtonShape, ButtonSize, ButtonVariant } from "@/components/Button";
import Button from "@/components/Button";
import Panel from "@/components/Panel";

const shapes: ButtonShape[] = ["round", "circle", "default"];
const variants: ButtonVariant[] = ["primary", "secondary", "danger", "outline"];
const sizes: ButtonSize[] = ["sm", "md", "lg"];

export default function Buttons() {
  return (
    <Panel title="Buttons" class="bg-white">
      <div class="flex flex-col gap-4">
        <div class="flex gap-4">
          <For each={shapes}>{(shape) => <Button shape={shape}>{shape}</Button>}</For>
        </div>
        <div class="flex gap-4">
          <For each={variants}>{(variant) => <Button variant={variant}>{variant}</Button>}</For>
        </div>
        <div class="flex gap-4">
          <For each={variants}>
            {(variant) => (
              <Button variant={variant} disabled>
                disabled
              </Button>
            )}
          </For>
        </div>
        <div class="flex gap-4 ">
          <For each={sizes}>{(size) => <Button size={size}>{size}</Button>}</For>
        </div>
      </div>
    </Panel>
  );
}
